<template>
  <div class="monitor-binning-ruls">
    <div class="tips" v-if="target.valueType == '6' || target.valueType == '7'">
      输入框中 + 代表 +<span class="infin">&infin;</span>， - 代表 -<span class="infin">&infin;</span>
    </div>
    <el-row :gutter="20">
      <el-col :offset="3" :span="4" align="center">代码值</el-col>
      <el-col :span="5" align="center">描述</el-col>
      <el-col :span="4" align="center">左值</el-col>
      <el-col :span="4" align="center">右值</el-col>
    </el-row>
    <el-row :gutter="20" v-for="(item, index) in target.labGrps" :key="index" class="rules">
      <el-col :span="2">
        <el-form-item label-width="0"> 区间{{ index + 1 }} : </el-form-item>
      </el-col>
      <el-col :span="1"> [</el-col>
      <el-col :span="4">
        <el-form-item
          :prop="'labGrps.' + index + '.codeCd'"
          label-width="0"
          :rules="[{ required: true, message: '代码值不能为空', trigger: 'blur' }]"
        >
          <el-input v-model="item.codeCd" placeholder="请输入代码值"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item
          :prop="'labGrps.' + index + '.codeDesc'"
          label-width="0"
          :rules="[{ required: true, message: '描述不能为空', trigger: 'blur' }]"
        >
          <el-input v-model="item.codeDesc" placeholder="请输入描述"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <!-- 整数 -->
        <template v-if="target.valueType == '6'">
          <el-form-item
            :prop="'labGrps.' + index + '.valLft'"
            label-width="0"
            :rules="
              index == 0
                ? [
                    { required: true, message: '左值不能为空', trigger: 'blur' },
                    {
                      validator: (rule, value, callback) => {
                        checkNum(rule, value, callback, '-')
                      },
                      trigger: 'blur'
                    }
                  ]
                : { required: true, message: '左值不能为空', trigger: 'blur' }
            "
          >
            <el-input v-model="item.valLft" placeholder="请输入左值" v-if="index == 0"></el-input>
            <el-input-number v-model="item.valLft" :min="0" :step="1" :step-strictly="true" v-else></el-input-number>
          </el-form-item>
        </template>
        <!-- 小数 -->
        <template v-else-if="target.valueType == '7'">
          <el-form-item
            :prop="'labGrps.' + index + '.valLft'"
            label-width="0"
            :rules="
              index == 0
                ? [
                    { required: true, message: '左值不能为空', trigger: 'blur' },
                    {
                      validator: (rule, value, callback) => {
                        checkNum(rule, value, callback, '-')
                      },
                      trigger: 'blur'
                    }
                  ]
                : { required: true, message: '左值不能为空', trigger: 'blur' }
            "
          >
            <el-input
              v-model="item.valLft"
              placeholder="请输入左值"
              v-if="index == 0"
              @blur="format(item, 'valLft')"
            ></el-input>
            <el-input-number
              v-model="item.valLft"
              :min="0.0"
              :step="0.01"
              :precision="2"
              :step-strictly="true"
              v-else
            ></el-input-number>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item
            :prop="'labGrps.' + index + '.valLft'"
            label-width="0"
            :rules="{ required: true, message: '左值不能为空', trigger: 'blur' }"
          >
            <!-- 日期 -->
            <el-date-picker
              v-model="item.valLft"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-if="target.valueType == '4'"
            ></el-date-picker>
            <!-- 日期时间 -->
            <el-date-picker
              v-model="item.valLft"
              type="datetime"
              placeholder="选择时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-else-if="target.valueType == '5'"
            ></el-date-picker>
            <el-input v-model="item.valLft" placeholder="请输入左值" v-else></el-input>
          </el-form-item>
        </template>
      </el-col>
      <el-col :span="4">
        <!-- 整数 -->
        <template v-if="target.valueType == '6'">
          <el-form-item
            :prop="'labGrps.' + index + '.valRit'"
            label-width="0"
            :rules="
              index == target.labGrps.length - 1
                ? [
                    { required: true, message: '左值不能为空', trigger: 'blur' },
                    {
                      validator: (rule, value, callback) => {
                        checkNum(rule, value, callback, '+')
                      },
                      trigger: 'blur'
                    }
                  ]
                : { required: true, message: '左值不能为空', trigger: 'blur' }
            "
          >
            <el-input
              v-model="item.valRit"
              placeholder="请输入右值"
              v-if="index == target.labGrps.length - 1"
            ></el-input>
            <el-input-number v-model="item.valRit" :min="0" :step="1" :step-strictly="true" v-else></el-input-number>
          </el-form-item>
        </template>
        <!-- 小数 -->
        <template v-else-if="target.valueType == '7'">
          <el-form-item
            :prop="'labGrps.' + index + '.valRit'"
            label-width="0"
            :rules="
              index == target.labGrps.length - 1
                ? [
                    { required: true, message: '左值不能为空', trigger: 'blur' },
                    {
                      validator: (rule, value, callback) => {
                        checkNum(rule, value, callback, '+')
                      },
                      trigger: 'blur'
                    }
                  ]
                : { required: true, message: '左值不能为空', trigger: 'blur' }
            "
          >
            <el-input
              v-model="item.valRit"
              placeholder="请输入右值"
              v-if="index == target.labGrps.length - 1"
              @blur="format(item, 'valRit')"
            ></el-input>
            <el-input-number
              v-model="item.valRit"
              :min="0.0"
              :step="0.01"
              :precision="2"
              :step-strictly="true"
              v-else
            ></el-input-number>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item
            :prop="'labGrps.' + index + '.valRit'"
            label-width="0"
            :rules="{ required: true, message: '右值不能为空', trigger: 'blur' }"
          >
            <!-- 日期 -->
            <el-date-picker
              v-model="item.valRit"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-if="target.valueType == '4'"
            ></el-date-picker>
            <!-- 日期时间 -->
            <el-date-picker
              v-model="item.valRit"
              type="datetime"
              placeholder="选择时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-else-if="target.valueType == '5'"
            ></el-date-picker>
            <el-input v-model="item.valRit" placeholder="请输入右值" v-else></el-input>
          </el-form-item>
        </template>
      </el-col>
      <el-col :span="1">)</el-col>
      <el-col :span="3" class="button-col">
        <el-button
          type="primary"
          icon="el-icon-plus"
          plain
          circle
          size="mini"
          @click="$emit('addRule', index + 1)"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-minus"
          plain
          circle
          size="mini"
          @click="$emit('removeRule', index)"
          v-if="index > 0"
        ></el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    target: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    checkNum(rule, value, callback, charactor) {
      if (isNaN(Number(value)) && value !== charactor) callback(new Error('只能输入数字或符号 ' + charactor))
      else callback()
    },
    format(target, field) {
      if (!isNaN(Number(target[field]))) target[field] = Number(target[field]).toFixed(2)
    }
  }
}
</script>

<style lang="scss">
.monitor-binning-ruls {
  padding-left: 10px;
  .tips {
    margin-left: 0;
    .infin {
      font-size: 20px;
      vertical-align: middle;
    }
  }
  .el-input__inner {
    text-align: center;
  }
  .el-input-number {
    width: 100%;
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
  }
  .rules {
    margin-top: 20px;
  }
}
</style>
